<template>
	<view class="circle_details">
		<view class="circle_item">
			<view class="circle_header">
				<image :src="item?.avatar" class="circle_header_img" v-if="item?.avatar"></image>
				<image src="http://qianxueapplet.suoeryun.com/avatar.png" class="circle_header_img" v-else></image>
				<view class="circle_header_right">
					<view class="circle_header_right_top">
						<text>{{item?.realname}}</text>
						<button @click="handleAttention" class="circle_header_btn"
							:class="{followed:item?.izFollow === '0',unFollowed:item?.izFollow === '1'}"
							v-if="item?.izFollow !== '-1'">
							{{item?.izFollow === '1'?'已关注':'关注'}}
						</button>
					</view>
					<view class="circle_text">{{item?.content}}</view>
					<view class="circle_img">
						<template v-if="item?.dynamicType === '0'">
							<image :src="img" v-for="(img,index) in item?.images?.split(',')" :key="img"
								@click="handlePreview(item?.images,index)" mode="aspectFill">
							</image>
						</template>
						<template v-else-if="item?.dynamicType === '1'">
							<view class="circle_video" @click="handleVideoPreview(item?.images)"
								:style="{height: Number(item.high)/3.5 + 'rpx',width:Number(item?.width)/3.5 +'rpx'}">
								<video :src="item?.images" :show-center-play-btn="false" :show-fullscreen-btn="false"
									:show-play-btn="false" :controls="false"
									:style="{height: Number(item.high)/3.5 + 'rpx',width:Number(item?.width)/3.5 +'rpx'}"></video>
								<image src="http://qianxueapplet.suoeryun.com/play.png"></image>
							</view>
						</template>
					</view>
					<view class="circle_header_right_bottom">
						<text>{{item?.fromToday}}发布</text>
						<text v-if="item?.province">{{item?.province}}</text>
					</view>
					<view class="circle_tag" v-if="item?.activityName">
						<text>#{{item?.activityName}}</text>
					</view>
					<view class="circle_fun">
						<view @click="handleLike(item)">
							<image src="http://qianxueapplet.suoeryun.com/likeSelect.png" v-if="item?.izLike === '1'">
							</image>
							<image src="http://qianxueapplet.suoeryun.com/like.png" v-else></image>
							<text>{{item?.likes}}</text>
						</view>
						<view @click="handleComment(item)">
							<image src="http://qianxueapplet.suoeryun.com/comments.png"></image>
							<text>{{item?.comment}}</text>
						</view>
						<view @click="handleShare(item)">
							<image src="http://qianxueapplet.suoeryun.com/forward.png"> </image>
							<text>{{item?.relay}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 评论 -->
	<comment ref="commentRef" @close="handleCommentClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { qxPlazaDynamicsQueryById, likeOrUnLike } from '@/config/circle.api';
	import { ref, unref } from 'vue';
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";
	import { qxUserConcernAdd } from '@/config/mine.api';

	const item = ref();
	const commentRef = ref();
	const shareRef = ref();
	const loadParams = ref();

	onLoad(async (params) => {
		console.log(params, 'sdf');
		loadParams.value = params;
	})

	onShow(async () => {
		const params = unref(loadParams);
		const res = await qxPlazaDynamicsQueryById({ id: params?.id });
		item.value = res;
		if (params?.orderId) {
			handleComment(item.value)
		}
	})

	/**
	 * 点赞
	 */
	async function handleLike(item) {
		const res = await likeOrUnLike({ id: item?.id, izLike: item?.izLike === '1' ? '0' : '1' });
		item.izLike = res?.izLike;
		item.likes = res?.likes;
		uni.showToast({
			icon: 'none',
			title: res?.izLike === '1' ? '点赞成功' : '取消点赞'
		});
	}

	/**
	 * 评论
	 */
	function handleComment(item) {
		//type 1 活动 2图集 3视频 4圈子
		commentRef.value.handleShow({ activityId: item?.id, num: item?.comment, belongId: item?.id, type: '4' });
	}

	/**
	 * 评论回调
	 */
	function handleCommentClose(num) {
		item.value['comment'] = num;
	}

	/**
	 * 分享
	 */
	function handleShare(item) {
		shareRef.value.handleShow({ path: 'pages/circle/circleDetails', scene: `id=${item?.id}`, activityId: item?.id, });
	}
	/**
	 * 关注
	 */
	async function handleAttention() {
		uni.$u.throttle(async function () {
			const res = await qxUserConcernAdd({ izFollow: item.value?.izFollow === '0' ? '1' : '0', userId: item.value?.createBy });
			if (!uni.$u.test.object(res)) {
				item.value.izFollow = res;
			}
		}, 1000)
	}


	/**
	 * 图片预览
	 */
	function handlePreview(imgs, index) {
		uni.previewImage({
			current: index,
			urls: imgs?.split(','),
		})
	}

	/**
	 * 视频预览
	 */
	async function handleVideoPreview(imgs) {
		uni.navigateTo({
			url: '/pages/circle/videoPreview?src=' + imgs,
		})
	}
</script>

<style lang="scss" scoped>

</style>